{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# pyecharts基于page的布局"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "from pyecharts.globals import ThemeType\n",
    "from pyecharts.faker import Faker\n",
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar, Grid, Line, Page, Pie"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'purple-passion':'https://assets.pyecharts.org/assets/themes/purple-passion'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"0f6580c3472f4fce9238ccaf37fa1938\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'purple-passion'], function(echarts) {\n",
       "                var chart_0f6580c3472f4fce9238ccaf37fa1938 = echarts.init(\n",
       "                    document.getElementById('0f6580c3472f4fce9238ccaf37fa1938'), 'purple-passion', {renderer: 'canvas'});\n",
       "                var option_0f6580c3472f4fce9238ccaf37fa1938 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u97e9\\u5bd2\",\n",
       "            \"data\": [\n",
       "                1265,\n",
       "                495,\n",
       "                3931\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u8521\\u5f90\\u5764\",\n",
       "            \"data\": [\n",
       "                42,\n",
       "                159,\n",
       "                202\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u97e9\\u5bd2\",\n",
       "                \"\\u8521\\u5f90\\u5764\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u97e9\\u5bd2\": true,\n",
       "                \"\\u8521\\u5f90\\u5764\": true\n",
       "            },\n",
       "            \"show\": true\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"comments_count\",\n",
       "                \"reposts_count\",\n",
       "                \"attitudes_count\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u8f6c\\u53d1\\u53cd\\u9988\\u7edf\\u8ba1\"\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"horizontal\",\n",
       "        \"itemSize\": 15,\n",
       "        \"itemGap\": 10,\n",
       "        \"left\": \"80%\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\",\n",
       "                \"type\": \"png\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\",\n",
       "                \"readOnly\": false\n",
       "            },\n",
       "            \"dataZoom\": {\n",
       "                \"show\": true,\n",
       "                \"title\": {\n",
       "                    \"zoom\": \"data zoom\",\n",
       "                    \"back\": \"data zoom restore\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    }\n",
       "};\n",
       "                chart_0f6580c3472f4fce9238ccaf37fa1938.setOption(option_0f6580c3472f4fce9238ccaf37fa1938);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x232ca072c88>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.PURPLE_PASSION))\n",
    "bar.add_xaxis(['comments_count','reposts_count','attitudes_count'])\n",
    "bar.add_yaxis(\"韩寒\", [1265,495,3931])\n",
    "bar.add_yaxis(\"蔡徐坤\", [42,159,202])\n",
    "bar.set_global_opts(title_opts=opts.TitleOpts(title=\"转发反馈统计\"),toolbox_opts=opts.ToolboxOpts())\n",
    "bar.render_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'purple-passion':'https://assets.pyecharts.org/assets/themes/purple-passion'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"43dcf0722d9347c7ac3a0f970d27c90d\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'purple-passion'], function(echarts) {\n",
       "                var chart_43dcf0722d9347c7ac3a0f970d27c90d = echarts.init(\n",
       "                    document.getElementById('43dcf0722d9347c7ac3a0f970d27c90d'), 'purple-passion', {renderer: 'canvas'});\n",
       "                var option_43dcf0722d9347c7ac3a0f970d27c90d = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u97e9\\u5bd2\",\n",
       "            \"data\": [\n",
       "                32585\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u8521\\u5f90\\u5764\",\n",
       "            \"data\": [\n",
       "                22630\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u97e9\\u5bd2\",\n",
       "                \"\\u8521\\u5f90\\u5764\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u97e9\\u5bd2\": true,\n",
       "                \"\\u8521\\u5f90\\u5764\": true\n",
       "            },\n",
       "            \"show\": true\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"repost\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u67d0\\u5546\\u573a\\u9500\\u552e\\u60c5\\u51b5\"\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"horizontal\",\n",
       "        \"itemSize\": 15,\n",
       "        \"itemGap\": 10,\n",
       "        \"left\": \"80%\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\",\n",
       "                \"type\": \"png\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\",\n",
       "                \"readOnly\": false\n",
       "            },\n",
       "            \"dataZoom\": {\n",
       "                \"show\": true,\n",
       "                \"title\": {\n",
       "                    \"zoom\": \"data zoom\",\n",
       "                    \"back\": \"data zoom restore\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    }\n",
       "};\n",
       "                chart_43dcf0722d9347c7ac3a0f970d27c90d.setOption(option_43dcf0722d9347c7ac3a0f970d27c90d);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x232ca0a3f60>"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.PURPLE_PASSION))\n",
    "bar.add_xaxis(['repost'])\n",
    "bar.add_yaxis(\"韩寒\", [32585])\n",
    "bar.add_yaxis(\"蔡徐坤\", [22630])\n",
    "bar.set_global_opts(title_opts=opts.TitleOpts(title=\"某商场销售情况\"),toolbox_opts=opts.ToolboxOpts())\n",
    "bar.render_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'F:\\\\notebooks1\\\\Data Analysis\\\\render.html'"
      ]
     },
     "execution_count": 19,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "bar1 = Bar(init_opts=opts.InitOpts(theme=ThemeType.PURPLE_PASSION))\n",
    "bar1.add_xaxis(['comments_count','reposts_count','attitudes_count'])\n",
    "bar1.add_yaxis(\"韩寒\", [1265,495,3931])\n",
    "bar1.add_yaxis(\"蔡徐坤\", [42,159,202])\n",
    "bar1.set_global_opts(title_opts=opts.TitleOpts(title=\"转发反馈统计\"),toolbox_opts=opts.ToolboxOpts())\n",
    "\n",
    "bar2 = Bar(init_opts=opts.InitOpts(theme=ThemeType.PURPLE_PASSION))\n",
    "bar2.add_xaxis(['repost'])\n",
    "bar2.add_yaxis(\"韩寒\", [32585])\n",
    "bar2.add_yaxis(\"蔡徐坤\", [22630])\n",
    "bar2.set_global_opts(title_opts=opts.TitleOpts(title=\"某商场销售情况\"),toolbox_opts=opts.ToolboxOpts())\n",
    "\n",
    "page = Page(layout=Page.DraggablePageLayout)\n",
    "# 需要自行调整每个 chart 的 height/width，显示效果在不同的显示器上可能不同\n",
    "page.add(bar1,bar2)\n",
    "page.render()\n",
    "#运行上面代码后会在下面的目录中出现一个render.html文件，文件里包含上面两张图，打开此html文件，可以拖动图形到你想要的位置\n",
    "#拖动完成后点击左上角的save config，然后会在你的浏览器下载目录里生成一个“chart_config.json”文件\n",
    "#如果目录下已经有了此文件会生成的是chart_config (1)，注意再windows系统下建议把chart_config (1)中的空格去掉，这样的文件名才符合规范"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'<!DOCTYPE html>\\n<html>\\n<head>\\n    <meta charset=\"UTF-8\">\\n    <title>Awesome-pyecharts</title>\\n            <script type=\"text/javascript\" src=\"https://assets.pyecharts.org/assets/echarts.min.js\"></script>\\n        <script type=\"text/javascript\" src=\"https://assets.pyecharts.org/assets/themes/purple-passion.js\"></script>\\n        <script type=\"text/javascript\" src=\"https://assets.pyecharts.org/assets/jquery.min.js\"></script>\\n        <script type=\"text/javascript\" src=\"https://assets.pyecharts.org/assets/jquery-ui.min.js\"></script>\\n        <script type=\"text/javascript\" src=\"https://assets.pyecharts.org/assets/ResizeSensor.js\"></script>\\n\\n            <link rel=\"stylesheet\"  href=\"https://assets.pyecharts.org/assets/jquery-ui.css\">\\n\\n</head>\\n<body>\\n    <style>.box {  }; </style>\\n        \\n    <div class=\"box\">\\n                <div id=\"0f7e9efe465f456b87f4d377fc159317\" class=\"chart-container\" style=\"position: absolute; width: 661px; height: 500px; top: 31.80000114440918px; left: 8px;\"></div>\\n    <script>\\n        var chart_0f7e9efe465f456b87f4d377fc159317 = echarts.init(\\n            document.getElementById(\\'0f7e9efe465f456b87f4d377fc159317\\'), \\'purple-passion\\', {renderer: \\'canvas\\'});\\n        var option_0f7e9efe465f456b87f4d377fc159317 = {\\n    \"animation\": true,\\n    \"animationThreshold\": 2000,\\n    \"animationDuration\": 1000,\\n    \"animationEasing\": \"cubicOut\",\\n    \"animationDelay\": 0,\\n    \"animationDurationUpdate\": 300,\\n    \"animationEasingUpdate\": \"cubicOut\",\\n    \"animationDelayUpdate\": 0,\\n    \"series\": [\\n        {\\n            \"type\": \"bar\",\\n            \"name\": \"\\\\u97e9\\\\u5bd2\",\\n            \"data\": [\\n                1265,\\n                495,\\n                3931\\n            ],\\n            \"barCategoryGap\": \"20%\",\\n            \"label\": {\\n                \"show\": true,\\n                \"position\": \"top\",\\n                \"margin\": 8\\n            }\\n        },\\n        {\\n            \"type\": \"bar\",\\n            \"name\": \"\\\\u8521\\\\u5f90\\\\u5764\",\\n            \"data\": [\\n                42,\\n                159,\\n                202\\n            ],\\n            \"barCategoryGap\": \"20%\",\\n            \"label\": {\\n                \"show\": true,\\n                \"position\": \"top\",\\n                \"margin\": 8\\n            }\\n        }\\n    ],\\n    \"legend\": [\\n        {\\n            \"data\": [\\n                \"\\\\u97e9\\\\u5bd2\",\\n                \"\\\\u8521\\\\u5f90\\\\u5764\"\\n            ],\\n            \"selected\": {\\n                \"\\\\u97e9\\\\u5bd2\": true,\\n                \"\\\\u8521\\\\u5f90\\\\u5764\": true\\n            },\\n            \"show\": true\\n        }\\n    ],\\n    \"tooltip\": {\\n        \"show\": true,\\n        \"trigger\": \"item\",\\n        \"triggerOn\": \"mousemove|click\",\\n        \"axisPointer\": {\\n            \"type\": \"line\"\\n        },\\n        \"textStyle\": {\\n            \"fontSize\": 14\\n        },\\n        \"borderWidth\": 0\\n    },\\n    \"xAxis\": [\\n        {\\n            \"show\": true,\\n            \"scale\": false,\\n            \"nameLocation\": \"end\",\\n            \"nameGap\": 15,\\n            \"gridIndex\": 0,\\n            \"inverse\": false,\\n            \"offset\": 0,\\n            \"splitNumber\": 5,\\n            \"minInterval\": 0,\\n            \"splitLine\": {\\n                \"show\": false,\\n                \"lineStyle\": {\\n                    \"width\": 1,\\n                    \"opacity\": 1,\\n                    \"curveness\": 0,\\n                    \"type\": \"solid\"\\n                }\\n            },\\n            \"data\": [\\n                \"comments_count\",\\n                \"reposts_count\",\\n                \"attitudes_count\"\\n            ]\\n        }\\n    ],\\n    \"yAxis\": [\\n        {\\n            \"show\": true,\\n            \"scale\": false,\\n            \"nameLocation\": \"end\",\\n            \"nameGap\": 15,\\n            \"gridIndex\": 0,\\n            \"inverse\": false,\\n            \"offset\": 0,\\n            \"splitNumber\": 5,\\n            \"minInterval\": 0,\\n            \"splitLine\": {\\n                \"show\": false,\\n                \"lineStyle\": {\\n                    \"width\": 1,\\n                    \"opacity\": 1,\\n                    \"curveness\": 0,\\n                    \"type\": \"solid\"\\n                }\\n            }\\n        }\\n    ],\\n    \"title\": [\\n        {\\n            \"text\": \"\\\\u8f6c\\\\u53d1\\\\u53cd\\\\u9988\\\\u7edf\\\\u8ba1\"\\n        }\\n    ],\\n    \"toolbox\": {\\n        \"show\": true,\\n        \"orient\": \"horizontal\",\\n        \"itemSize\": 15,\\n        \"itemGap\": 10,\\n        \"left\": \"80%\",\\n        \"feature\": {\\n            \"saveAsImage\": {\\n                \"show\": true,\\n                \"title\": \"save as image\",\\n                \"type\": \"png\"\\n            },\\n            \"restore\": {\\n                \"show\": true,\\n                \"title\": \"restore\"\\n            },\\n            \"dataView\": {\\n                \"show\": true,\\n                \"title\": \"data view\",\\n                \"readOnly\": false\\n            },\\n            \"dataZoom\": {\\n                \"show\": true,\\n                \"title\": {\\n                    \"zoom\": \"data zoom\",\\n                    \"back\": \"data zoom restore\"\\n                }\\n            }\\n        }\\n    }\\n};\\n        chart_0f7e9efe465f456b87f4d377fc159317.setOption(option_0f7e9efe465f456b87f4d377fc159317);\\n    </script>\\n<br/>                <div id=\"ea36455531fe492ba5bcf6f2f4624701\" class=\"chart-container\" style=\"position: absolute; width: 900px; height: 500px; top: 166.60000610351562px; left: 673px;\"></div>\\n    <script>\\n        var chart_ea36455531fe492ba5bcf6f2f4624701 = echarts.init(\\n            document.getElementById(\\'ea36455531fe492ba5bcf6f2f4624701\\'), \\'purple-passion\\', {renderer: \\'canvas\\'});\\n        var option_ea36455531fe492ba5bcf6f2f4624701 = {\\n    \"animation\": true,\\n    \"animationThreshold\": 2000,\\n    \"animationDuration\": 1000,\\n    \"animationEasing\": \"cubicOut\",\\n    \"animationDelay\": 0,\\n    \"animationDurationUpdate\": 300,\\n    \"animationEasingUpdate\": \"cubicOut\",\\n    \"animationDelayUpdate\": 0,\\n    \"series\": [\\n        {\\n            \"type\": \"bar\",\\n            \"name\": \"\\\\u97e9\\\\u5bd2\",\\n            \"data\": [\\n                32585\\n            ],\\n            \"barCategoryGap\": \"20%\",\\n            \"label\": {\\n                \"show\": true,\\n                \"position\": \"top\",\\n                \"margin\": 8\\n            }\\n        },\\n        {\\n            \"type\": \"bar\",\\n            \"name\": \"\\\\u8521\\\\u5f90\\\\u5764\",\\n            \"data\": [\\n                22630\\n            ],\\n            \"barCategoryGap\": \"20%\",\\n            \"label\": {\\n                \"show\": true,\\n                \"position\": \"top\",\\n                \"margin\": 8\\n            }\\n        }\\n    ],\\n    \"legend\": [\\n        {\\n            \"data\": [\\n                \"\\\\u97e9\\\\u5bd2\",\\n                \"\\\\u8521\\\\u5f90\\\\u5764\"\\n            ],\\n            \"selected\": {\\n                \"\\\\u97e9\\\\u5bd2\": true,\\n                \"\\\\u8521\\\\u5f90\\\\u5764\": true\\n            },\\n            \"show\": true\\n        }\\n    ],\\n    \"tooltip\": {\\n        \"show\": true,\\n        \"trigger\": \"item\",\\n        \"triggerOn\": \"mousemove|click\",\\n        \"axisPointer\": {\\n            \"type\": \"line\"\\n        },\\n        \"textStyle\": {\\n            \"fontSize\": 14\\n        },\\n        \"borderWidth\": 0\\n    },\\n    \"xAxis\": [\\n        {\\n            \"show\": true,\\n            \"scale\": false,\\n            \"nameLocation\": \"end\",\\n            \"nameGap\": 15,\\n            \"gridIndex\": 0,\\n            \"inverse\": false,\\n            \"offset\": 0,\\n            \"splitNumber\": 5,\\n            \"minInterval\": 0,\\n            \"splitLine\": {\\n                \"show\": false,\\n                \"lineStyle\": {\\n                    \"width\": 1,\\n                    \"opacity\": 1,\\n                    \"curveness\": 0,\\n                    \"type\": \"solid\"\\n                }\\n            },\\n            \"data\": [\\n                \"repost\"\\n            ]\\n        }\\n    ],\\n    \"yAxis\": [\\n        {\\n            \"show\": true,\\n            \"scale\": false,\\n            \"nameLocation\": \"end\",\\n            \"nameGap\": 15,\\n            \"gridIndex\": 0,\\n            \"inverse\": false,\\n            \"offset\": 0,\\n            \"splitNumber\": 5,\\n            \"minInterval\": 0,\\n            \"splitLine\": {\\n                \"show\": false,\\n                \"lineStyle\": {\\n                    \"width\": 1,\\n                    \"opacity\": 1,\\n                    \"curveness\": 0,\\n                    \"type\": \"solid\"\\n                }\\n            }\\n        }\\n    ],\\n    \"title\": [\\n        {\\n            \"text\": \"\\\\u67d0\\\\u5546\\\\u573a\\\\u9500\\\\u552e\\\\u60c5\\\\u51b5\"\\n        }\\n    ],\\n    \"toolbox\": {\\n        \"show\": true,\\n        \"orient\": \"horizontal\",\\n        \"itemSize\": 15,\\n        \"itemGap\": 10,\\n        \"left\": \"80%\",\\n        \"feature\": {\\n            \"saveAsImage\": {\\n                \"show\": true,\\n                \"title\": \"save as image\",\\n                \"type\": \"png\"\\n            },\\n            \"restore\": {\\n                \"show\": true,\\n                \"title\": \"restore\"\\n            },\\n            \"dataView\": {\\n                \"show\": true,\\n                \"title\": \"data view\",\\n                \"readOnly\": false\\n            },\\n            \"dataZoom\": {\\n                \"show\": true,\\n                \"title\": {\\n                    \"zoom\": \"data zoom\",\\n                    \"back\": \"data zoom restore\"\\n                }\\n            }\\n        }\\n    }\\n};\\n        chart_ea36455531fe492ba5bcf6f2f4624701.setOption(option_ea36455531fe492ba5bcf6f2f4624701);\\n    </script>\\n<br/>    </div>\\n    <script>\\n            $(\\'#0f7e9efe465f456b87f4d377fc159317\\').css(\\'border-style\\', \\'dashed\\').css(\\'border-width\\', \\'0px\\');$(\"#0f7e9efe465f456b87f4d377fc159317>div:nth-child(1)\").width(\"100%\").height(\"100%\");\\n            new ResizeSensor(jQuery(\\'#0f7e9efe465f456b87f4d377fc159317\\'), function() { chart_0f7e9efe465f456b87f4d377fc159317.resize()});\\n            $(\\'#ea36455531fe492ba5bcf6f2f4624701\\').css(\\'border-style\\', \\'dashed\\').css(\\'border-width\\', \\'0px\\');$(\"#ea36455531fe492ba5bcf6f2f4624701>div:nth-child(1)\").width(\"100%\").height(\"100%\");\\n            new ResizeSensor(jQuery(\\'#ea36455531fe492ba5bcf6f2f4624701\\'), function() { chart_ea36455531fe492ba5bcf6f2f4624701.resize()});\\n            var charts_id = [\\'0f7e9efe465f456b87f4d377fc159317\\',\\'ea36455531fe492ba5bcf6f2f4624701\\'];\\nfunction downloadCfg () {\\n    const fileName = \\'chart_config.json\\'\\n    let downLink = document.createElement(\\'a\\')\\n    downLink.download = fileName\\n\\n    let result = []\\n    for(let i=0; i<charts_id.length; i++) {\\n        chart = $(\\'#\\'+charts_id[i])\\n        result.push({\\n            cid: charts_id[i],\\n            width: chart.css(\"width\"),\\n            height: chart.css(\"height\"),\\n            top: chart.offset().top + \"px\",\\n            left: chart.offset().left + \"px\"\\n        })\\n    }\\n\\n    let blob = new Blob([JSON.stringify(result)])\\n    downLink.href = URL.createObjectURL(blob)\\n    document.body.appendChild(downLink)\\n    downLink.click()\\n    document.body.removeChild(downLink)\\n}\\n    </script>\\n</body>\\n</html>\\n'"
      ]
     },
     "execution_count": 24,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "page.save_resize_html(\"render.html\", cfg_file=r\"C:\\Users\\wp\\Downloads\\chart_config3.json\", dest=\"my_new_chartsqqq.html\")\n",
    "#拖动完成后再下面输出上面命令，运行则会生成按照你的要求布局的可视化html文件"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {},
   "outputs": [],
   "source": [
    "a=pd.Series({\"a\":1,\"b\":2,\"c\":4})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import pandas as pd\n",
    "import json\n",
    "from pandas.io.json import json_normalize\n",
    "import pyecharts as pe\n",
    "from collections import Counter"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 33,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "('a', 1)\n",
      "('b', 2)\n",
      "('c', 4)\n"
     ]
    }
   ],
   "source": [
    "for i in a.sort_values().items():\n",
    "    print(i)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
